<template>
  <div v-loading="loading">
    <el-table ref="tableData" :stripe="stripe" :size="tableSize" :data="tableList" :height="height"
              :cell-style="handleCellStyle" :row-style="handleRowStyle" :cell-class-name="handleCellClassName" fit
              @selection-change="handleSelectionChange" @current-change="handleTableCurrentChange"
              @row-click="handleTableRowClick"
              @cell-click="handleCellClick"
              v-bind="otherConfig"
    >
      <template v-for="(item, index) in columns">
        <!-- 选择框 -->
        <el-table-column v-if="item.selection" type="selection" width="50" :fixed="item.fixed" align="center"
                         header-align="center" :key="`selection_${index}`"></el-table-column>
        <!-- 序号 -->
        <el-table-column v-else-if="item.index" type="index" width="80" :fixed="item.fixed" label="序号"
                         :index="item.indexMethod" :key="`index_${index}`"></el-table-column>
        <!-- 多级表头 -->
        <el-table-column v-else-if="item.multi" align="center" :label="item.label" :key="`multi_${index}`">
          <el-table-column v-for="(child, childIndex) in item.children" :key="`child_${index}_${childIndex}`"
                           v-bind="child"></el-table-column>
          <slot show-overflow-tooltip :name="item.slot" :fixed="item.fixed" :width="item.width"
                :height="item.height"></slot>
        </el-table-column>
        <!-- 自定义内容 -->
        <slot v-else-if="item.slot" show-overflow-tooltip :name="item.slot" :fixed="item.fixed" :width="item.width"
              :height="item.height"></slot>
        <!-- 常规字段 -->
        <el-table-column v-else show-overflow-tooltip v-bind="item" :fixed="item.fixed" :min-width="item.minWidth"
                         :key="`normal_${index}`"></el-table-column>
      </template>
    </el-table>
    <!-- eslint-disable -->
    <el-pagination
      v-if="isPaginationShow && pagination.total"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 40, 100]"
      :current-page="pagination.current"
      :page-size.sync="pagination.size"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <!-- eslint-enable -->
    <!-- 自定义内容 -->
    <slot name="custom-content"></slot>
  </div>
</template>
<script>
export default {
  name: "YgTable",
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    tableList: {
      type: Array,
      default: () => [],
    },
    pagination: {
      type: Object,
      default: () => ({
        current: 1,
        size: 10,
        total: 0,
      }),
    },
    isPaginationShow: {
      type: Boolean,
      default: true,
    },
    // wrapperHeight: {
    //   type: [Number, String],
    //   default: '100%', // 一般情况下，更多地是配置父元素的高度，table的高度根据父元素高度计算
    // },
    // height: {
    //   type: [Number, String],
    //   default: 'calc(100% - 48px)', // table的默认高度是 父元素高度 减去 pagination高度，一般情况下，这个默认配置就够用了，有特殊场景可以另配置
    // },
    // maxHeight: {
    //   type: [Number, String],
    //   default: 'auto',
    // },
    tableSize: {
      type: String,
      default: "mini",
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    height: {
      type: String,
      default: "500",
    },
    otherConfig: {
      type: Object,
      default: () => {
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    handleCellStyle: {
      type: Function,
      default: () => {
      },
    },
    handleRowStyle: {
      type: Function,
      default: () => {
      },
    },
    handleCellClassName: {
      type: Function,
      default: () => {
      },
    },
    handleCellClick: {
      type: Function,
      default: () => {
      },
    },
  },
  data() {
    return {};
  },
  created() {
    // //console.log(this.pagination);
  },
  methods: {
    // 切换页码
    handleCurrentChange(val) {
      // //console.log(val)
      this.$emit("getData", val);
    },
    // 切换每页条数
    handleSizeChange(val) {
      this.$emit("getDataNum", val);
    },
    // 切换选择
    handleSelectionChange(val) {
      //console.log(val);
      this.$emit("changeSelection", val);
    },
    // 单选
    handleTableCurrentChange(currentRow) {
      this.$emit("changeCurrent", currentRow);
    },
    // 点击行
    handleTableRowClick(currentRow) {
      this.$emit("rowClick", currentRow);
    },
  },
  watch: {
    data() {
      // 重新请求数据时 table滚动到顶部
      this.$refs.tableData.$refs.bodyWrapper.scrollTop = 0;
      //console.log(this.pagination);
    },
    pagination: {
      deep: true,
      handler(newVal) {
        //console.log("子组件接收到了参数...", newVal);
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.el-pagination {
  float: right;
}
</style>
